<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加角色</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">名称</label>

            <div class="col-sm-10">
              <input type="text" class="form-control" name="name" id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="noteId" class="col-sm-2 control-label">描述</label>

            <div class="col-sm-10">
              <input type="text" class="form-control" name="note" id="noteId" placeholder="描述">
            </div>
          </div>
          <div class="form-group">
				<label class="col-sm-2 control-label">授权</label>
				<div class="col-sm-10">
						<ul id="menuTree" class="ztree"></ul>
				</div>
		  </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
    <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    var zTree;
    var setting = {
        data : {
            simpleData : {
                enable : true, //使用简单数据模式
                idKey : "id",  //节点数据中保存唯一标识的属性名称
                pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                rootPId : null  //根节点id
            }
        },
        check:{
            enable:true,
            nocheckInherit:true
        }//此配置提供复选框操作(可查官方zTree)
    }
    $(function(){
        //异步加载菜单信息,初始化页面菜单
        doLoadSysMenus();
        $(".box-footer")
            .on("click",".btn-save",doSaveOrUpdate)
            .on("click",".btn-cancel",doCancel);

    });

    function doCancel(){
        var url="role/role_list";
        $("#mainContentId")
            .load(url,function(){
                $("#mainContentId").removeData();
            });
    }
    function doSaveOrUpdate(){
        debugger
        //1.参数(表单数据)
        var params=doGetEditFormData();
        if(!params.name.trim()){
            alert("角色名不能为空");
            return;
        }
        if(!params.menuIds.trim()){
            alert("请为角色赋予权限")
            return;
        }
        var data=$("#mainContentId").data("data");
        if(data)params.id=data.id;
        //2.url
        var insertUrl="role/doSaveObject";
        var updateUrl="role/doUpdateObject";
        var url=data?updateUrl:insertUrl;
        //3.ajax request
        $.post(url,params,function(result){
            if(result.state==1){
                alert(result.message);
                doCancel();
            }else{
                alert(result.message);
            }
        })
    }
    function doGetEditFormData(){
        //1.获取角色自身信息
        var params={
            name:$("#nameId").val(),
            note:$("#noteId").val()
        }
        //2.获取选中菜单信息
        var menuIds=[];
        console.log(zTree)
        var checkedNodes=
            zTree.getCheckedNodes(true);
        for(var i in checkedNodes){
            menuIds.push(checkedNodes[i].id);
        }
        params.menuIds=menuIds.toString();
        return params;
    }

    //页面加载完成时初始化zTree
    function doLoadSysMenus(){
        var url="menu/doFindZtreeMenuNodes"
        $.getJSON(url,function(result){
            console.log(result);
            if(result.state==1){
                zTree=$.fn.zTree.init(
                    $("#menuTree"),setting,result.data);
                //修改时添加如下代码(注意先后顺序)
                var rowData=$("#mainContentId").data("data");
                if(rowData)doInitEditFormData(rowData);
            }else{
                alert(result.message);
            }
        });
    }

    function doInitEditFormData(data){
        console.log("data",data);
        //1.初始化角色自身信息
        $("#nameId").val(data.name);
        $("#noteId").val(data.note);
        //2.初始化菜单信息
        //2.1展开树节点
        zTree.expandAll(true);
        //2.2获取角色对应的菜单id
        var menuIds=data.menuIds;
        //2.3迭代所有菜单id
        for(var i in menuIds){
            //基于菜单id获取ztree中的node节点
            var node=
                zTree.getNodeByParam("id",menuIds[i]);
            //让节点选中
            zTree.checkNode(node,true,false);
        }
    }

</script>